<template>
  <div id="system_role">
    <div class="searchBox">
      <a-form class="searchForm" layout="inline" :form="form">
        <a-form-item>
          <a-input
            v-decorator="[
          'search_name',
          {rules: [{required: true, message: '请输入角色名称' }]}
        ]"
            placeholder="请输入角色名称"
          />
        </a-form-item>
        <a-form-item>
          <a-button @click="search" type="primary" html-type="submit">搜索</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="reset">重置</a-button>
        </a-form-item>
      </a-form>
      <div class="toolBtn">
        <a-button @click="showModel = true" type="primary" html-type="submit">增加角色</a-button>
      </div>
    </div>
    <div class="table">
      <a-table
        :scroll="{ y: tableHeight }"
        :pagination="false"
        rowKey="id"
        :bordered="true"
        :columns="columns"
        :dataSource="data"
      >
        <div
          slot="time"
          slot-scope="text,record"
        >{{moment(record.create_time).format('YYYY-MM-DD HH:mm:ss')}}</div>
        <div slot="action" slot-scope="text, record">
          <a-button @click="setUser(record)" type="primary" class="actionBtn" size="small">用户</a-button>
          <a-button @click="setPermission(record)" type="primary" class="actionBtn" size="small">权限</a-button>
          <a-button @click="edit(record)" class="actionBtn" size="small">修改</a-button>
          <a-popconfirm placement="left" title="确实要删除该角色吗?" @confirm="del(record.id)" okText="确定" cancelText="取消">
            <a-button type="danger" class="actionBtn" size="small">删除</a-button>
          </a-popconfirm>
        </div>
      </a-table>
      <a-pagination
        v-if="dataCount > 0"
        class="pager"
        @change="pageChange"
        v-model="pageIndex"
        :total="dataCount"
        :pageSize="pageSize"
      />
    </div>
    <editor ref="editor"></editor>
    <setUser ref="setUser"></setUser>
    <setPermission ref="setPermission"></setPermission>
  </div>
</template>
<script>
import editor from "./role/editor";
import setUser from "./role/setUser";
import setPermission from "./role/setPermission";
import { async } from 'q';
const columns = [
  {
    title: "角色名",
    dataIndex: "role_name"
  },
  {
    title: "创建时间",
    width: 198,
    dataIndex: "create_time",
    scopedSlots: { customRender: "time" }
  },
  {
    title: "操作",
    width: 300,
    key: "action",
    scopedSlots: { customRender: "action" }
  }
];
export default {
  components: {
    editor,
    setUser,
    setPermission
  },
  data() {
    return {
      data: [],
      columns,
      pageIndex: 1,
      dataCount: 0,
      form: this.$form.createForm(this),
      moment: require("moment"),
      showModel: false,
      showUserModel: false,
      showPermissionModel:false,
      pageSize: 38,
      tableHeight: 260
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.tableHeight = document.querySelector(".table").clientHeight - 100;
  },
  methods: {
    async setPermission(record){
      //todo: 超级管理员拥有所有角色
      this.$refs.setPermission.record = record;
      this.$refs.setPermission.permissions = [];
      this.$refs.setPermission.refers = null;
      await this.$refs.setPermission.getReferData();
      await this.$refs.setPermission.getPermissionData();
      this.showPermissionModel = true;
    },
    async setUser(record) {
      this.$refs.setUser.record = record;
      await this.$refs.setUser.getUsersByRoleId();
      await this.$refs.setUser.getUsersNotHasRoleId();
      this.showUserModel = true;
    },
    async switchStat(record) {
      let stat = record.stat == "disable" ? "enable" : "disable";
      let result = await this.$post("/system/user/setStat", {
        id: record.id,
        stat
      });
      if (result.error) return;
      this.$notification.success({
        message: "设置成功"
      });
      record.stat = stat;
    },
    edit(item) {
      this.showModel = true;
      this.$nextTick(_ => {
        let obj = {
          role_name: item.role_name,
          extra: item.extra,
          id: item.id
        };
        this.$refs.editor.form.setFieldsValue(obj);
      });
    },
    async del(id) {
      let result = await this.$post("/system/role/del", { id });
      if (result.error) return;
      this.$notification.success({
        message: "删除成功"
      });
      if (this.dataCount > this.pageSize) {
        let search_name = this.form.getFieldValue("search_name");
        this.getData(this.pageIndex - 1, search_name);
        return;
      }
      let index = this.data.findIndex(v => v.id == id);
      this.data.splice(index, 1);
    },
    pageChange(pageIndex) {
      let search_name = this.form.getFieldValue("search_name");
      this.getData(pageIndex - 1, search_name);
    },
    async getData(page_index = 0, role_name = "") {
      let result = await this.$post("/system/role/getList", {
        page_index,
        role_name
      });
      this.pageIndex = page_index + 1;
      this.data = result.data;
      this.dataCount = result.data_count;
    },
    async search() {
      this.form.validateFields(async (err, values) => {
        if (err) return;
        this.getData(0, values.search_name);
      });
    },
    async reset() {
      this.form.resetFields();
      this.getData();
    }
  }
};
</script>
<style scoped>
#system_role {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.table {
  flex: 1;
}
.pager {
  margin-top: 12px;
  float: right;
}
.searchBox {
  margin-bottom: 12px;
  display: flex;
}
.searchForm {
  flex: 1;
}
.toolBtn {
  padding-top: 4px;
}
</style>

<style>
#system_role .actionBtn {
  margin-left: 12px !important;
}
#system_role .ant-form-inline .ant-form-item-with-help {
  margin-bottom: 0px !important;
}
</style>


